<template>
  <div class="persBox">
      <!-- 编辑个人资料页面 -->
      <div class="title">
          <p>个人设置</p>
      </div>
      <div class="pers-c">
       <ul class="funBox">
           <li v-for="item in funList" :key="item.id" @click="setSwitch(item.id)">
               <span class="fun" :class="persId == item.id?persActive:''">
                   {{item.text}}
                </span>
           </li>
       </ul>
       <!-- 对应功能栏显示区域 -->
       <div>
           <!-- 修改个人资料页面 -->
           <div v-show="presShow==1001">
               <Modifydata />
           </div>
           <!-- 修改头像页面 -->
           <div v-show="presShow==1002">
               <Portrait />
           </div>
           <!-- 修改密码页面 -->
           <div v-show="presShow==1003">
               <Changepassword />
           </div>
       </div>
      </div>
  </div>
</template>

<script>
import Changepassword from './Changepassword.vue'
import Modifydata from './Modifydata.vue'
import Portrait from './Portrait.vue'
export default {
  components: { Modifydata, Portrait, Changepassword },
    data(){
        return {
            persId:1001,
            persActive:'persActive',
            presShow:1001,
            funList:[
                {
                    id:1001,
                    text:'个人资料'
                },
                {
                    id:1002,
                    text:'修改头像'
                },
                {
                    id:1003,
                    text:'密码安全'
                },
            ]
        }
    },
    methods:{
        setSwitch(id){
            this.persId=id
            this.presShow=id
        }
    }
}
</script>

<style>
.persBox{
    width: 900px;
    height: 780px;
    background: #fff;
}
.persBox .title{
    height: 50px;
    width: 100%;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    text-align: left;
}
.persBox .pers-c{
    padding: 10px;
}
.persBox .title>p{
    padding-left: 50px;
    color: #000;
}
.funBox{
    text-align: left;
    height: 40px;
}
.funBox>li{
    width: 100px;
    height: 20px;
    margin: 10px 0;
    border-right: 1px solid #000;
    float: left;
    text-align: center;
    color: #999;
}
.funBox>li:hover{
    cursor:pointer
}
.funBox>li:last-child{
    border-right: none;
}
.persBox .fun{
    display: inline-block;
    width: 70px;
    height: 20px;
    line-height: 20px;
    
}
.persActive{
    color: #09ADE2;
    border-bottom: 1px solid#09ADE2;
}
</style>